<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta charset="utf-8">
		<base href="/webproject/day02/">
		<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
		Remove this if you use the .htaccess -->
		<meta name="viewport" content="width=device-width; initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="renderer" content="webkit">
		<!-- 360高速模式-->
		<meta name="description" content="bootstrap基本模板">
		<meta name="author" content="chengt01">
		<meta name="keywords" content="bootstrap,html5,css3">
		<title>index</title>
		<link rel="stylesheet" href="../bootstrap/css/bootstrap.min.css"/>
		<link rel="stylesheet" href="../styles/site.css"/>
		<!--[if lt IE 9]>
		<script src="../scripts/html5.min.js"></script>
		<script src="../scripts/respond.min.js"></script>
		<![endif]-->
	</head>

	<body class="container">

		<header class="page-header visible-sm visible-md visible-lg">
			<h1>form</h1>
		</header>
		<div class="row">
			<div class="col-sm-6 col-sm-offset-3">
				<form class="form-horizontal" method="get" action="">
					<div >
						<label class="col-sm-2 control-label" for="email">Email</label>
						<div class="col-sm-10">
							<input id="email" type="email" class="form-control" id="email" 
							placeholder="Enter email" required />
							<!-- disabled -->
							<span ></span>
						</div>
					</div>
					<div >
						<label class="col-sm-2 control-label" for="username">Username</label>
						<div class="col-sm-10">
							<input id="username" type="text" class="form-control" id="username" 
							placeholder="Enter username" required />
							<!-- readonly -->
							<span ></span>
						</div>
					</div>
					<div >
						<label class="col-sm-2 control-label" for="password">password</label>
						<div class="col-sm-10">
							<input id="password" type="password" class="form-control" id="password" placeholder="Enter password" required />
							<span ></span>
						</div>
					</div>
					<p class="text-right">
						<button id="btnSubmit" type="submit" class="btn btn-primary">
							Submit
						</button>
						<button type="reset" class="btn btn-danger">
							Reset
						</button>
					</p>
				</form>
			</div>
		</div>
		<footer class="navbar-fixed-bottom label-info text-center">
			<p>
				Copyright  &copy;
				<abbr title="tarnna">hajiang</abbr>&trade; 2015
			</p>
		</footer>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
		<script type="text/javascript" src="../bootstrap/js/bootstrap.js"></script>
		<script>	
			function checkInput(txt){
				if(txt.val()==""){
					txt.parent().parent()
					.removeClass()
					.addClass("form-group has-error has-feedback");
					txt.next().removeClass()
					.addClass("glyphicon glyphicon-remove form-control-feedback");
				}else{
					txt.parent().parent()
					.removeClass()
					.addClass("form-group has-success has-feedback");
					txt.next().removeClass()
					.addClass("glyphicon glyphicon-ok form-control-feedback");
				}
			}
			$(function(){
				$("#email").change(function(){
					checkInput($("#email"));
				});
				$("#username").change(function(){
					checkInput($("#username"));
				});
				$("#password").change(function(){
					checkInput($("#password"));
				});
				$("#btnSubmit").click(function(){
					if(checkInput($("#email"))&&
					checkInput($("#username"))&&
					checkInput($("#password"))){
						return true;
					}else{
						return false;
					}
				});
			});
		</script>
	</body>
</html>
